import React from 'react'
import { Button, Table } from 'antd'
import '../../../less/index.less'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import quizType from '../../../constant/quizType'
import getQuizType from '../../../constant/quiz-type-app-address'
import { TwsReactMarkdownPreview } from 'tws-antd'
import { FormattedMessage } from 'react-intl'
import {getLangFromLocalStorage, convertContent, convertDynamicContent} from '../../../constant/lang-util'

const TaskContent = ({ taskInfo, isTutor, programId, studentId, location, settings, taskContentRead, handleContentRead }) => {
  const getAddressUrl = (address, assignment) => {
    const quizId = assignment.selectedQuizzes.map(({ quizId }) => quizId).sort((p, n) => p - n)[0]
    if (assignment.type === 'LOGIC_QUIZ') {
      return address + `/assignments/${assignment.id}/logic-quizzes/${quizId}`
    }
    return address + location.pathname + '/assignment/' + assignment.id + '/quiz/' + quizId
  }
  const columns = [{
    title: <FormattedMessage id='作业类型' />,
    dataIndex: 'text'
  }, {
    title: <FormattedMessage id='作业名称' />,
    dataIndex: 'title',
    render: (title, record) => {
      return record[`title_${getLangFromLocalStorage()}`] || record.title
    }
  }, {
    title: <FormattedMessage id='操作' />,
    dataIndex: 'id',
    render: (record, assignment) => {
      const addressSuffix = getQuizType(assignment.type)
      const address = `/learn${addressSuffix}`
      const url = getAddressUrl(address, assignment)
      const firstQuizId = assignment.selectedQuizzes.length > 0
        ? assignment.selectedQuizzes[assignment.selectedQuizzes.length - 1].quizId
        : 0
      return isTutor
        ? <a href={`${address}/tutor/program/${programId}/task/${taskInfo.task.id}/student/${studentId}/divider/assignment/${assignment.id}/quiz/${firstQuizId}`} target='_self'>学员答案</a>
        : <a href={url} target='_self'><FormattedMessage id='我要答题' /></a>
    }
  }, {
    title: <FormattedMessage id='状态' />,
    dataIndex: 'status',
    render: (text, record) => {
      return convertDynamicContent(text)
    }
  }]
  const {assignments = [], task = {}} = taskInfo
  const taskContent = task[`content_${getLangFromLocalStorage()}`] || task.content
  const dataSource = assignments.map(item => {
    let result = quizType.find(obj => obj.type === item.type)
    item.text = result ? convertContent(result.text) : ''
    return item
  })
  return (
    <div>
      <h4 className='margin-t-3 margin-b-2'><FormattedMessage id='任务卡内容' /></h4>
      <div className='mark-down-wrap'>
        <TwsReactMarkdownPreview source={taskContent} />
      </div>
      <div className='content-read'>
        {!isTutor
          ? (taskContentRead.id
            ? <Button type='primary' disabled><FormattedMessage id='已完成阅读' /></Button>
            : <Button type='primary' onClick={handleContentRead}><FormattedMessage id='我已阅读' /></Button>)
          : ''
        }
      </div>
      <div>
        <h4 className='margin-t-4 margin-b-2'><FormattedMessage id='作业' /></h4>
        <Table
          columns={columns}
          dataSource={dataSource}
          size='middle'
          pagination={false}
          locale={{emptyText: <FormattedMessage id='无作业' />}}
          rowKey={record => record.id}
        />
      </div>
    </div>)
}

const mapStateToProps = ({settings}) => ({settings})
const mapDispatchToProps = () => {}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(TaskContent))
